<template>
  <div :style="'width:' + widths + 'px'" class="left-menu-box">
    <a-button style="margin-bottom: 16px" @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"/>
    </a-button>
    <a-menu
      :default-selected-keys="defaultData"
      mode="inline"
      :inline-collapsed="collapsed"
      @click="handleClick"
    >
      <template v-for="item in list">
        <a-menu-item v-if="!item.children" :key="item.id">
          <a-icon type="pie-chart"/>
          <span>{{ item.name }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.id" :menu-info="item"/>
      </template>
    </a-menu>
  </div>
</template>

<script>
import {Menu} from 'ant-design-vue'

const SubMenu = {
  template: `
    <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
    <span slot="title">
          <a-icon type="mail"/><span>{{ menuInfo.name }}</span>
     </span>
    <template v-for="item in menuInfo.children">
      <a-menu-item v-if="!item.children" :key="item.id">
        <a-icon type="pie-chart"/>
        <span>{{ item.name }}</span>
      </a-menu-item>
      <sub-menu v-else :key="item.id" :menu-info="item"/>
    </template>
    </a-sub-menu>
  `,
  name: 'SubMenu',
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({})
    }
  }
}
export default {
  name: 'GlobalLeftMenu',
  components: {
    'sub-menu': SubMenu
  },
  data () {
    return {
      collapsed: true,
      widths: 48,
      list: [],
      defaultData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleClick(e) {
      console.log('我选中了那个应用', e)
      this.$store.commit('SET_APPID', e.key)
    },
    toggleCollapsed () {
      this.collapsed = !this.collapsed
      if (!this.collapsed) {
        this.widths = 156
      } else {
        this.widths = 48
      }
    },
    getList() {
      this.$api.getAppList().then(res => {
        console.log('应用权限', res)
        this.list = res.data
        this.defaultData.push(this.list[0].id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.left-menu-box {
  background: #ffffff;
  height: 100vh !important;
  border-right: 1px solid #e0e4e7;
}
>>> .ant-menu-inline-collapsed {
  width: 48px;
}
>>> .ant-menu-inline-collapsed > .ant-menu-item {
  padding: 0 !important;
  text-align: center;
}
>>> .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: #ffffff;
}
>>> .ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after{
  border: 0;
}
</style>
